<!--
 * @Author: Bennty
 * @Date: 2024-11-07 16:39:25
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-11-12 16:26:50
 * @Description: 请填写简介
-->
<template>
    <div class="p-2">
        <transition
            :enter-active-class="proxy?.animate.searchAnimate.enter"
            :leave-active-class="proxy?.animate.searchAnimate.leave"
        >
        <div class="search">
                <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="80px">
                    <el-form-item label="制单日期" prop="createTime">
                        <el-date-picker v-model="queryParams.createTime" placeholder="制单日期" format="YYYY/MM/DD" value-format="YYYY-MM-DD"></el-date-picker>
                    </el-form-item>
                    <!-- <el-form-item label="模糊搜索" prop="bomName">
                        <el-input type="text" v-model="queryParams.bomName" placeholder="模糊搜索" ></el-input>
                    </el-form-item> -->
                    <el-form-item label="客户" prop="customerName" >
                        <el-input v-model="queryParams.customerName" placeholder="客户" ></el-input>
                    </el-form-item>
                    <el-form-item label="入库状态" prop="inStatus" >
                        <el-select clearable v-model="queryParams.inStatus" placeholder="请选择">
                            <el-option label="未入库" value="0"></el-option>
                            <el-option label="部分入库" value="1"></el-option>
                            <el-option label="已入库" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="工单打印" prop="printStatus">
                        <el-select clearable v-model="queryParams.printStatus" placeholder="请选择">
                            <el-option label="未打印" value="0"></el-option>
                            <el-option label="已打印" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item props="bomName">
                        <el-input v-model="queryParams.bomName"  suffix-icon="Search" placeholder="模糊搜索"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </transition>
        <el-card shadow="never">
            <template #header>
                <el-row :gutter="8" class="mb8">
                    <el-col :span="1.5">
                        <h2>生产单数量：{{ produceOrderNum }}</h2>
                    </el-col>
                    <el-col :span="1.5">
                        
                    </el-col>
                    <el-col :span="1.5">
                        <h2>订单总量：{{ orderNum }}</h2>
                    </el-col>
                </el-row>
            </template>
            <el-table :data="productOrderList" :loading="loading">
                <!-- <el-table-column label="订单类别" width="100px" align="center">
                    <template #default="scope">
                        <span>{{ scope.row.orderType == '1'?'bom生产单':'全版面生产单' }}</span>
                    </template>
                </el-table-column> -->
                <el-table-column label="制单人" prop="createByName" align="center"></el-table-column>
                <el-table-column label="生产单号" prop="bomProductionCode" align="center"></el-table-column>
                <el-table-column label="制单日期" prop="createTime" align="center"></el-table-column>
                <el-table-column label="交货日期" align="center">
                    <template #default="scope">
                        <span :class="(nowTimeStamp -new Date(scope.row.deliveryDate.split(' ')[0]).getTime())/1000/60*60*24 > 3? 'alert':'not-alert'"> {{ scope.row.deliveryDate }} </span>
                    </template>
                </el-table-column>
                <el-table-column label="客户名称" prop="customerName" align="center"></el-table-column>
                <el-table-column label="产品名称" prop="bomName" align="center"></el-table-column>
                <el-table-column label="订 单数量" prop="produceNumber" align="center"></el-table-column>
                <el-table-column label="入库数量" align="center">
                    <template #default="scope">
                        <span>{{ scope.row.inNumber || 0 }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="工单打印" align="center" width="100px">
                    <template #default="scope">
                        <el-button v-if="scope.row.printStatus == '0'" @click="handleCheckOrderDetail(scope.row)" link type="danger">未打印</el-button>
                        <span class="primary" v-else>已打印</span>
                    </template>
                </el-table-column>
                <el-table-column label="辅材采购" align="center" width="90px">
                    <template #default="scope">
                        <el-button  link type="primary" @click="handleClickCheckAuxiliary(scope.row)">查看信息</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="半成品订单" align="center" width="90px">
                    <template #default="scope">
                        <el-button  link type="primary" @click="handleClickSemiProduct(scope.row)">查看信息</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="配料申请" align="center" width="90px">
                    <template #default="scope">
                        <el-button v-if="scope.row.applyStatus == '0'" link type="danger" @click="handleClickApplyIngredients(scope.row)">未申请</el-button>
                        <span class="primary" v-else>已申请</span>
                    </template>
                </el-table-column>
                <el-table-column label="发货设置" width="150px" align="center" >
                    <template #default="scope">
                        <span class="warning" v-if="scope.row.deliverySetting == '1'">{{ outlet_setting.filter((item:any)=>scope.row.deliverySetting == item.value)[0].label }}</span>
                        <span class="alert" v-else-if="scope.row.deliverySetting == '2'">{{ outlet_setting.filter((item:any)=>scope.row.deliverySetting == item.value)[0].label }}</span>
                        <span class="normal" v-else-if="scope.row.deliverySetting == '3'">{{ outlet_setting.filter((item:any)=>scope.row.deliverySetting == item.value)[0].label }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="入库状态" align="center" width="90px">
                    <template #default="scope">
                        <el-button v-if="scope.row.inStatus == '0'" link type="danger">未入库</el-button>
                        <el-button v-else-if="scope.row.inStatus == '1'" link type="warning">部分入库</el-button>
                        <span v-else class="primary">已入库</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="180px">
                    <template #default="scope">
                        <!-- <el-tooltip content="编辑" placement="top">
                            <el-button link :style="{fontSize:'15px'}" type="primary" icon="Edit" ></el-button>
                        </el-tooltip> -->
                        <el-tooltip content="订单详情">
                            <el-button link :style="{fontSize:'15px'}" type="warning" icon="Document" @click="handleCheckOrderDetail(scope.row)" ></el-button>
                        </el-tooltip>
                        <el-tooltip content="强制绿灯">
                            <el-button link :style="{fontSize:'15px'}" type="success" icon="Help" @click="handleClickForcePass(scope.row)"  ></el-button>
                        </el-tooltip>
                        <el-tooltip content="撤单">
                            <el-button link :style="{fontSize:'15px'}" type="warning" icon="Back" @click="handleClickWithdraw(scope.row)" ></el-button>
                        </el-tooltip>
                        <el-tooltip content="删除">
                            <el-button link :style="{fontSize:'15px'}" type="danger" icon="Delete" ></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="totalData > 0" :total="totalData" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
                @pagination="getBOMProductOrder" />
        </el-card>
        <orderDetail :visible="checkDetailVisible" :data="orderDetails" :packageMethod="package_method" @close="handleCloseCheck"  />
        <applyIngredients :visible="applyIngredientsVisible" :data="orderDetails" :applyIngredientsDetails="applyIngredientsDetails" @close="handleCloseApplyIngredients" />
        <checkAuxiliary :visible="checkAuxiliaryVisible" :infoList="auxiliaryList" @close="handleCloseCheckAuxiliary" />
        <checkSemiProduct :visible="checkSemiProductVisible" :infoList="semiProductList" @close="handleCloseSemiProduct" />
    </div>
</template>

<script setup lang="ts">
import { type FormInstance } from 'element-plus';
import { getBOMProductOrderApi,getProductOrderDetailApi,forcePassOrderApi,withdrawOrderApi,getPrintIngredientlDetailApi, getAuxiliaryDetailApi, getSemiProductDetailApi } from '@/api/sj/productManagement/BOMProductOrder';
import { QueryBOMOrderType,BOMOrderVO } from '@/api/sj/productManagement/BOMProductOrder/types';
import orderDetail from './components/orderDetail.vue';
import applyIngredients from './components/applyIngredients.vue';
import checkAuxiliary from './components/checkAuxiliary.vue';
import checkSemiProduct from './components/checkSemiProduct.vue';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { outlet_setting, package_method} = toRefs<any>(proxy?.useDict('outlet_setting','package_method'));
const queryFormRef = ref<FormInstance>();
const nowTimeStamp = ref<number>(new Date().getTime());
const loading = ref(false);

const data = reactive<pageDataOnlyQuery<QueryBOMOrderType>>({
    queryParams: {
        pageNum: 1,
        pageSize: 30,
        createTime: undefined,
        customerName: undefined,
        inStatus: undefined,
        printStatus: undefined,
        bomName: undefined,
    }
});
const { queryParams } = toRefs(data);

const productOrderList = ref<BOMOrderVO[]>([]);
const totalData = ref(0);
const produceOrderNum = ref(0);
const orderNum = ref(0);
const checkDetailVisible = ref(false);
const orderDetails = ref<any>();
const applyIngredientsVisible = ref(false);
const applyIngredientsDetails = ref<any>();
const checkAuxiliaryVisible = ref(false);
const auxiliaryList = ref<any[]>([]);
const checkSemiProductVisible = ref(false);
const semiProductList = ref<any[]>([]);

const getBOMProductOrder = async () => {
    loading.value = true;
    const { data } = await getBOMProductOrderApi(queryParams.value);
    productOrderList.value = data.dataPage.records;
    totalData.value = data.dataPage.total;
    produceOrderNum.value = data.produceOrderNumber;
    orderNum.value = data.orderNumber;
    loading.value = false;
};

/** 搜索按钮操作 */
const handleQuery = () => {
    queryParams.value.pageNum = 1;
    getBOMProductOrder();
};

const resetQuery = () => {
    queryFormRef.value?.resetFields();
    handleQuery();
};

/** 查看订单详情 */
const handleCheckOrderDetail = async (row: BOMOrderVO) => {
    const { data,code } = await getProductOrderDetailApi(row.id);
    if(code == 200){
        orderDetails.value = data;
        checkDetailVisible.value = true;
    };
    // router.push('/produceManagement/orderTable')
};

/** 关闭查看详情 */
const handleCloseCheck = () => {
    checkDetailVisible.value = false;
    getBOMProductOrder();
};

/** 强制绿灯 */
const handleClickForcePass = async (row: BOMOrderVO) => {
    await proxy?.$modal.confirm("确认要对此生产单进行强制绿灯？");
    const { code } = await forcePassOrderApi({id: row.id});
    if(code == 200){
        proxy?.$modal.msgSuccess('对生产单强制绿灯成功');
        getBOMProductOrder();
    };
};

/** 撤销订单 */
const handleClickWithdraw = async (row: BOMOrderVO) => {
    await proxy?.$modal.confirm("确定要撤销此条订单么?撤销后的订单会恢复到生产单未下单");
    const { code } = await withdrawOrderApi({id:row.id });
    if(code == 200){
        proxy?.$modal.msgSuccess('撤销订单成功');
        getBOMProductOrder();
    }
};

/** 点击配料申请 */
const handleClickApplyIngredients = async (row: BOMOrderVO) => {
    const { data,code } = await getProductOrderDetailApi(row.id);
    const result = await getPrintIngredientlDetailApi(row.id);
    if(code == 200 && result.code == 200){
        orderDetails.value = data;
        applyIngredientsDetails.value = result.data;
        applyIngredientsVisible.value = true;
    };
};

/** 关闭申请配料 */
const handleCloseApplyIngredients = () => {
    applyIngredientsVisible.value = false;
    getBOMProductOrder();
};

/** 查看辅材信息 */
const handleClickCheckAuxiliary = async (row: BOMOrderVO) => {
    const { code, data } = await getAuxiliaryDetailApi(row.bomId);
    if(code == 200){
        auxiliaryList.value = data;
        checkAuxiliaryVisible.value = true;
    };
};

const handleCloseCheckAuxiliary = () => {
    checkAuxiliaryVisible.value = false;
};

/** 查看半成品信息 */
const handleClickSemiProduct = async (row: BOMOrderVO) => {
    const { code, data } = await getSemiProductDetailApi(row.bomId);
    if(code == 200){
        semiProductList.value = data;
        checkSemiProductVisible.value = true;
    };
};

const handleCloseSemiProduct = () => {
    checkSemiProductVisible.value = false;
};

onMounted(()=>{
    getBOMProductOrder();
});
</script>

<style lang="scss" scoped>

</style>